<template>
    <div class="pay_detail">
        <ul class="pay_ul">
            <li>
                <label>缴费项目</label>
                <span>XXX物业费</span>
            </li>
            <li>
                <label>收费单位</label>
                <span>XXX物业费</span>
            </li>
            <li>
                <label>应缴金额</label>
                <span>3000.00元</span>
            </li>
            <li>
                <label>已交金额</label>
                <span>1000.00元</span>
            </li>
            <li>
                <label>缴费金额</label>
                <div>
                    <input style="width: 1rem" />
                    <span>元</span>
                </div>
            </li>
            <li>
                <label>优惠金额</label>
                <span>50.00元</span>
            </li>
            <li>
                <label>支付金额</label>
                <span>950.00元</span>
            </li>
            <li>
                <label>xxx ... xxx</label>
            </li>
            <li>
                <label>xxx ... xxx</label>
            </li>
            <li>
                <label>缴费月份</label>
                <span>2021年6月</span>
            </li>
            <li>
                <label>温馨提示</label>
                <span>xxx</span>
            </li>
        </ul>
        <div class="btns">
            <div>缴费</div>
            <div class="clear">取消</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Pay"
    }
</script>

<style>
    .pay_detail {
        padding-top: .56rem;
        color: #101010;
    }

    .pay_detail .pay_ul {
        margin: 0 2rem .5rem;
        font-size: .27rem;
    }

    .pay_detail .pay_ul li {
        margin-bottom: .365rem;
        line-height: .38rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .pay_detail .pay_ul label {
        width: 1.8rem;
    }

    .pay_detail .btns {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .pay_detail .btns div {
        width: 1.8rem;
        height: .69rem;
        line-height: .69rem;
        border-radius: 2px 2px 2px 2px;
        background-color: rgba(244, 172, 96, 100);
        text-align: center;
        font-size: .27rem;
        color: #fff;
        box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.24);
    }

    .pay_detail .btns div.clear {
        background-color: rgba(164, 162, 161, 100);
    }
</style>